<template>
  <a-layout-header :class="[headerTheme, 'admin-header']">
    <div :class="['admin-header-wide', layout, pageWidth]" style="z-index:999;">
      <!-- <router-link v-if="isMobile || layout === 'side'" to="/home" :class="['logo', isMobile ? null : 'pc', headerTheme]"> -->
      <!-- <img v-show="!collapsed" width="32" src="@/assets/img/logo.png" />
        <h1 >{{systemName}}</h1> -->
      <!-- </router-link> -->
      <!-- {{name}} -->
      <span style="font-size: 16px;font-weight: 400;color: #999999;" v-if="name!=='首页'">{{name}} / </span><span style="font-size: 16px;font-weight: 400;color: #333333;" >{{$route.name}}</span>

      <!-- <a-icon v-if="layout !== 'head'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/> -->
      <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
        <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect" />
      </div>
      <div :class="['admin-header-right', headerTheme]">
        <!-- <div style="margin: 0 10px; color:white"  >
          <a-icon type="lock" />
        </div> -->
        <!-- <span style="position: relative;margin-right: 30px;cursor: pointer;" @click="toBacklog">
          <b style="display:inline-block;width:8px;height:8px;border-radius: 50%;position: absolute;top: 16px;right:0;background: red;" ></b>
          <a-icon style="font-size: 18px;" type="bell" />
        </span> -->
        <header-avatar class="header-item" @logout="logout" />

      </div>
    </div>
  </a-layout-header>
</template>

<script>

import HeaderAvatar from './HeaderAvatar'
import IMenu from '@/components/menu/menu'
import { mapState, mapMutations } from 'vuex'
// import { userMessageList } from '@/services/message'

export default {
  name: 'AdminHeader',
  components: { IMenu, HeaderAvatar },
  props: ['collapsed', 'menuData'],
  data () {
    return {
      name: '',
      langList: [
        { key: 'CN', name: '简体中文', alias: '简体' },
        { key: 'HK', name: '繁體中文', alias: '繁體' },
        { key: 'US', name: 'English', alias: 'English' }
      ],
      searchActive: false
    }
  },
  watch: {

    $route: {
      handler () {
        this.name = this.menuData.find(ele => {
          return ele.fullPath === ('/' + this.$route.fullPath.split('/')[1])
        })?.name
      },
      deep: true
    }

  },
  computed: {
    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
    headerTheme () {
      if (this.layout === 'side' && this.theme.mode === 'dark' && !this.isMobile) {
        return 'light'
      }
      return this.theme.mode
    },
    langAlias () {
      const lang = this.langList.find(item => item.key === this.lang)
      return lang.alias
    },
    menuWidth () {
      const { layout, searchActive } = this
      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
      const extraWidth = searchActive ? '600px' : '400px'
      return `calc(${headWidth} - ${extraWidth})`
    }
  },
  mounted () {
    this.name = this.menuData.find(ele => {
      return ele.fullPath === ('/' + this.$route.fullPath.split('/')[1])
    })?.name
    // this._userMessageList()
  },
  methods: {
    // async _userMessageList () {
    //   const res = await userMessageList(
    //     {
    //       status: 1,
    //       pageNum: 1,
    //       pageSize: 1000
    //     }
    //   )
    //   if (res.isSuccess) {
    //     console.log(res, '??????')
    //   }
    // },
    toBacklog () {
      window.open('/#/todo/message')
    },
    logout () {
      this.$emit('logout')
    },

    lock () {
      // this.setLockFlag('true')
      // this.$router.push({ path: '/lock' })
    },
    toggleCollapse () {
      this.$emit('toggleCollapse')
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    ...mapMutations('setting', ['setLang']),
    ...mapMutations('account', ['setLockFlag'])
  }
}
</script>

<style lang="less" scoped>
@import "index";
</style>
